<template>
    <el-row type="flex" justify="center" class="tac" style="margin-top:50px;margin-bottom: 300px">
         <el-col :span="18">
             <el-row  :gutter="20" >
                 <el-col v-for="(classes,index) in classesList" :key="index"
                  :span="6" style="margin-bottom: 20px;text-align: center">
                     <el-card shadow="hover">
                         <!-- 图片 -->
                        <el-row>
                            <el-image
                            style="width: 100px; height: 100px;border-radius:50%"
                            :src="require('~/assets/image/classes.png')"
                            fit="cover"></el-image>
                        </el-row>
                        <!-- 班级名称 -->
                        <el-row style="margin: 10px auto"><span>{{classes.name}}</span></el-row>

                        <!-- 老师名称 -->
                        <el-row style="margin: 10px auto"> <span style="font-size:13px">管理员：{{classes.tname}}</span></el-row>
                        <!-- 班级创建时间 -->
                        <el-row style="margin: 10px auto"><time class="time" >创建时间：{{classes.creatTime}}</time></el-row>
                        <el-row>
                            <router-link :to="{name:'testList-cid',params:{cid:classes.id,userId:userId}}"><el-link type="success">进入考试</el-link></router-link>
                            <el-link type="danger">退出班级</el-link>
                        </el-row>
                    </el-card>
                 </el-col>
             </el-row>
         </el-col>
    </el-row>
</template>

<style>
.time {
    font-size: 13px;
    color: #999;
  }

</style>

<script>
import studentApi from '@/api/studentApi';
import userApi from '@/api/userApi';
export default {
    asyncData({params}){
        return studentApi.queryClassesListBySid(params.id).then(response =>{
            return {
                classesList:response.data.data,
                userId:params.id
            }
        })
    },

    methods:{
        
    }
}
</script>

